<template>
  <div class="left-sidebar">
    <h3>基础模块</h3>
    <draggable
      class="drag-area"
      :list="components"
      :group="{ name: 'components', pull: 'clone', put: false }"
      :clone="cloneComponent"
    >
      <div class="component-item" v-for="element in components" :key="element.name">
        {{ element.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
let id = 1;
export default {
  name: 'LeftSidebar',
  components: {
    draggable
  },
  data() {
    return {
      components: [
        { name: '标题栏', type: 'title-bar' },
        { name: '文本', type: 'text' },
        { name: '按钮', type: 'button' },
      ]
    }
  },
  methods: {
    cloneComponent(component) {
      let props = {};
      switch (component.type) {
        case 'title-bar':
          props = {
            text: '标题栏',
            color: '#333333',
            fontSize: 16,
            textAlign: 'center'
          };
          break;
        case 'text':
          props = {
            text: '这是一个文本段落',
            color: '#333333',
            fontSize: 14
          };
          break;
        case 'button':
          props = {
            text: '按钮',
            btnType: 'primary',
            size: 'medium'
          };
          break;
      }
      return {
        id: id++,
        type: component.type,
        props: props
      };
    }
  }
}
</script>

<style scoped>
.left-sidebar {
  width: 200px;
  border-right: 1px solid #ccc;
  padding: 10px;
}
.component-item {
  padding: 10px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  cursor: grab;
}
</style>